<template>
	<div class="">
    <el-form :model="elForm" label-width="128px" ref="elForm">
      <fieldset>
        <legend>基本信息</legend>
        <el-form-item :rules="FormRule.Select" class="is-required" label="项目分类：" prop="class">
          <el-select :disabled="elForm.type!=0&&!elForm.edit" clearable placeholder="请选择项目分类" v-model="elForm.project_class">
            <!--1 '内部',2'外部'-->
            <el-option :key="item" :label="item" :value="idx+1" v-for="(item,idx) in project_class"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :rules="FormRule.Select" class="is-required" label="项目类型：" prop="type">
          <el-select :disabled="elForm.type!=0&&!elForm.edit" clearable placeholder="请选择项目类型" v-model="elForm.project_type">
            <!--1'硬件',2'软件',3'云平台', 4'PC软件'-->
            <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in project_type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :rules="FormRule.NotNull" class="is-required" label="客户名称：" prop="customer">
          <el-input :disabled="elForm.type!=0&&!elForm.edit" clearable maxlength="50" placeholder="请输入客户名称" v-model.trim="elForm.customer"></el-input>
        </el-form-item>
        <el-form-item :rules="FormRule.NotNull" class="is-required" label="项目名称：" prop="project_name">
          <el-input :disabled="elForm.type!=0&&!elForm.edit" clearable maxlength="50" placeholder="请输入项目名称" v-model.trim="elForm.project_name"></el-input>
        </el-form-item>
        <el-form-item :rules="FormRule.Select" class="is-required" label="期望立项日期：" prop="date1">
          <el-date-picker :disabled="elForm.type!=0&&!elForm.edit"	v-model="elForm.date1" type="date" placeholder="请选择期望立项日期"></el-date-picker>
        </el-form-item>
        <el-form-item :rules="FormRule.Select" class="is-required" label="期望样机日期：" prop="date2">
          <el-date-picker :disabled="elForm.type!=0&&!elForm.edit"	v-model="elForm.date2" type="date" placeholder="请选择期望样机日期"></el-date-picker>
        </el-form-item>
        <el-form-item :rules="FormRule.Select" class="is-required" label="预计结项日期：" prop="date3">
          <el-date-picker :disabled="elForm.type!=0&&!elForm.edit"	v-model="elForm.date3" type="date" placeholder="请选择预计结项日期"></el-date-picker>
        </el-form-item>
        <el-form-item :rules="FormRule.NotNull" class="is-required" label="研发负责人：" prop="user">
          <el-input :disabled="elForm.type!=0&&!elForm.edit" clearable maxlength="50" placeholder="请输入研发负责人" v-model.trim="elForm.user"></el-input>
        </el-form-item>
        <el-form-item :rules="FormRule.NotNull" class="is-required" label="应用方向：" prop="direction">
          <el-input :disabled="elForm.type!=0&&!elForm.edit" clearable maxlength="50" placeholder="请输入应用方向" v-model.trim="elForm.direction"></el-input>
        </el-form-item>
        <el-form-item :rules="FormRule.NotNull" class="is-required" label="业绩潜力：" prop="performance">
          <el-input :disabled="elForm.type!=0&&!elForm.edit" clearable maxlength="50" placeholder="请输入业绩潜力" v-model.trim="elForm.performance"><span style="color:black;" slot="suffix">万元</span></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input :disabled="elForm.type!=0&&!elForm.edit" clearable maxlength="50" placeholder="请输入备注" v-model.trim="elForm.remark"></el-input>
        </el-form-item>
      </fieldset>
      <fieldset>
        <legend>需求描述</legend>
        <div class="ueditor">
          <vue-tinymce placeholder="请输入需求描述内容" v-model="content" :setting="setting"	/>
        </div>
      </fieldset>
      <fieldset v-if="elForm.type==0&&!elForm.edit">
        <legend>附件上传</legend>
        <el-form-item class="uploadFile" label="上传">
          <el-upload ref="upload" class="uploadResume" action="http://api.template.dwinhmi.com.cn/admin/file/upload"
            :headers="{Token: $store.store.user.token}"
            :on-success="papersUploadSuccess2" :on-error="uploadError" :on-remove="removeFile"
            :before-upload="validateDocument" :data="upould3" :auto-upload="true">
            <el-button size="small" type="primary">上传项目附件</el-button>
          </el-upload>
        </el-form-item>
      </fieldset>
      <el-form-item v-if="elForm.type==0||elForm.edit" style="width: 10%;margin: 20px auto;position: relative; left: -128px;" class="el-btn-box">
        <el-button @click="addProject" class="el-btn" type="primary">{{ elForm.edit?'提交修改':'提交立项申请' }}</el-button>
        <el-button v-if="elForm.edit" @click="Cancel" class="el-btn" type="info">取消修改</el-button>
      </el-form-item>
    </el-form>
	</div>
</template>

<script>
export default {
	name: 'addArticle',
  props: ["elForm"],
	data() {
		return {
			type: '',
			id: '',
      project_class: ['内部','外部'],
			project_type: [{id: 1, name: '硬件'}, {id: 2, name: '软件'}, {id: 3, name: '云平台'}, {id: 4, name: 'PC软件'}],
			upould3: {
				key_id: "",
				token: "",
				tab_flag: 2,
				attach_type: 3,
			},
			content: '',
      setting: {
				selector: '#ueditor',
        menubar: false,
        readonly: this.elForm.type!=0,
				content_style: "img {max-width:100%;}",
        toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat ",
        // toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image table lists fullscreen quickbars wordcount",
        language: 'zh_CN', //本地化设置
				images_upload_handler: (blobInfo, succFun, failFun) => {
					var xhr, formData;
					var file = blobInfo.blob();//转化为易于理解的file对象
					xhr = new XMLHttpRequest();
					xhr.withCredentials = false;
					formData = new FormData();
					formData.append('file', file, file.name );//此处与源文档不一样
					this.$api.Upload(formData)
					.then(res => {
						succFun('http://api.template.dwinhmi.com.cn/'+res.data.path);
					})
					.catch(err => {
						failFun('HTTP Error: ' + err);
					})
				},
				branding: false,
        height: 350
      },
		};
	},
  computed: {  
    editTinymce() {  
      return this.elForm.edit
    }  
  },  
  watch: {  
    editTinymce(newValue, oldValue) {  
      if (newValue) {
        this.$tinymce.editors[0].setMode('design')
      } else {
        this.$tinymce.editors[0].setMode('readonly')
      }
    }  
  },
	methods: {
		SubEvents(type, data) {
			this.type = type
			// this.$popup.maxHeight();
			if (type == 1) {
				this.elForm = {...this.elForm,...data};
				this.id = data.id;
			}
		},
    papersUploadSuccess2 (res) {
			if (res.code == 0) {
				this.elForm.file.push(res.data.path)
			} else {
				this.$layer.msg(res.msg);
			}
			console.log(this.elForm.file)
		},
		uploadError (res) {
			this.$layer.msg(res.msg)
		},
		removeFile(file) {
			this.elForm.file.splice(this.elForm.file.findIndex(e => e === file.response.data.path), 1)
		},
		validateDocument (file) {
			var arr = ['pdf', 'docx', "rar", "doc", "xls", "xlsx",'zip',"jpg","png","jpeg","7z"]
			var current = file.name.split('.');
			var suffix = current[current.length - 1];
			if (arr.indexOf(suffix) === -1) {
				this.$layer.msg('文件类型只能是' + arr.join(','))
				return false
			}
			return true
		},
    addProject() {

		},
		Cancel() {
			this.$emit('cancel', false);
		}
	}
};
</script>
<style scoped  lang="scss">
  fieldset {
		border: 1px solid #ccc;
		border-radius: 10px;
		padding: 0px 30px 30px;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20px;
		legend {
			margin-left: 30px;
		}
		>div {
			width: 20%;
			&:nth-of-type(1) {
				margin-top: 24px!important;
			}
			&:last-child {
				width: 100%;
				&.uploadFile {
					width: 40%;
				}
			}
			.el-date-editor.el-input {
				width: 100%;
			}

		}
	}
</style>
